<template>
  <view class="menu-box">
    <tp-icon-menu></tp-icon-menu>
  </view>

  <ai-section title="推荐行程规划" :bg-transparent="true" type="line"></ai-section>
  <tp-art-item-list 
    :plans="plans" 
    :more="false" 
    @loadMore="queryPlans"
    @agree="handleAgree"
    @collect="handleCollect"
    more-text="推荐更多规划"></tp-art-item-list>
  
  <view class="fix-box">
    <ai-button color="primary" :block="true" size="lg" @click="hanleStartPlan">创建一次新规划</ai-button>
  </view>

  <tp-footer></tp-footer>
</template>

<script>
  export default {
    data() {
      return {
        swiperImages: [],
        plans: [],
        more: false,
        page: 1,
        size: 5,
      }
    },
    onLoad() {
      this.initData()
    },
    onPullDownRefresh() {
      this.initData()
      setTimeout(() => {
        uni.stopPullDownRefresh()
      }, 1000)
    },
    onReachBottom() {
      if (this.more) {
        this.queryPlans()
      }
    },
    methods: {
      initData() {
        this.resetPage()
        this.queryPlans()
      },
      resetPage() {
        this.more = true
        this.page = 1
        let len = this.plans.length
        if (len > 0) {
          this.plans.splice(0, len)
        }
      },
      queryPlans() {
        let url = this.$urls.getApi("searchPlans")
        let page = this.page
        let size = this.size;
        this.$get(url, {
          data: { page, size },
          needAuth: false
        }).then(res => {
          let plans = res.module || []
          this.more = plans.length >= size
          if (this.more) {
            this.page = page + 1;
          }
          if (plans) {
            this.plans.push(...plans)
          }
        })
      },
      hanleStartPlan() {
        uni.navigateTo({
          url: "/pages/plan/start"
        })
      },
      handleAgree(e) {
        const {index, planId} = e
        let url = this.$urls.getApi("agreePlan")
        this.$post(url, {
          data: {
            planId
          }
        })
        .then((res) => {
          let data = res.module
          const {active, count} = data
          let plan = this.plans[index]
          plan.agreeCnt = count
          plan.agreed = active
        })
      },
      handleCollect(e) {
        const {index, planId} = e
        let url = this.$urls.getApi("collectPlan")
        this.$post(url, {
          data: {
            planId
          }
        })
        .then((res) => {
          let data = res.module
          const {active, count} = data
          let plan = this.plans[index]
          plan.collectCnt = count
          plan.collected = active
        })
      }
    }
  }
</script>

<style lang="scss">
  @import "@/styles/_var.scss";
  .menu-box {
    background-color: var(--white);
  }
  
  .fix-box {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 6px 40px $gutter 40px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.65));
    
  }
</style>